import React, { useState, FC,useEffect } from 'react';
import { useDispatch, useSelector, useHistory } from 'umi';
import './Access.less';
import { Form, Row, Col, Input, Table, Button } from 'antd';
const Access: React.FC = () => {
  const [form] = Form.useForm();
  let dispatch = useDispatch();
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };
  const result = useSelector((state: { access: any }) => state.access);
  console.log(result.accessList);
  const [params, setparams] = useState<any>({ page: 1, pageSize: 12 });
  useEffect(() => {
      dispatch({
          type:"access/getlistacc"
      })
      dispatch({
          type:"access/getaccessList",
          payload:{params}
      })
  }, [])
  
  const columns = [
    {
      title: 'IP',
      dataIndex: 'ip',
    },
    {
      title: 'URL',
      dataIndex: 'url',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '浏览器',
      dataIndex: 'browser',
    },
    {
      title: '内核',
      dataIndex: 'engine',
    },
    {
      title: '设备',
      dataIndex: '',
    },
    {
      title: '操作',
      render:()=>{
          return <span>删除</span>
      }
    },
  ];

  return (
    <div className="access">
      <div className="top">
        <Form
          form={form}
          name="advanced_search"
          className="ant-advanced-search-form from"
          onFinish={onFinish}
        >
          <div className="item">
            <Form.Item
              label="IP"
              name="ip"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="UA"
              name="userAgent"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="URL"
              name="url"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="地址"
              name="address"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="浏览器"
              name="browser"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="内核"
              name="engine"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="OS"
              name="os"
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="设备"
              name=""
              className="item1"
              rules={[{ required: true, message: 'Please input your ip!' }]}
            >
              <Input />
            </Form.Item>
          </div>
          <Row>
            <Col span={24} style={{ textAlign: 'right' }}>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
              <Button
                style={{ margin: '0 8px' }}
                onClick={() => {
                  form.resetFields();
                }}
              >
                重置
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
      <div className="table">
        <Table columns={columns} rowKey="id"   dataSource={result.accessList} />
      </div>
    </div>
  );
};

export default Access;


